<template>
  <div class="container-home">
    <div
      :class="{
        isShow: isShow,
        'title-box': isActive,
        'title-box-pre': !isActive
      }"
    >
      <div class="logo">
        <img src="../../assets/common/logo.png" alt="" />
      </div>
      <div class="text">{{ $GIN_VUE_ADMIN.appName }}</div>
    </div>
    <div class="right-box">
      <div class="user-box">当前用户：{{ userStore.userInfo.realName }}</div>
      <div
        v-loading.fullscreen.lock="loginOutLoading"
        element-loading-text="请稍等"
        class="exit-box"
      >
        <el-button @click="toLoginOut" color="rgba(255,255,255,0.34)">
          <template #default>
            <img
              style="width: 12px; margin-right: 2px"
              src="../../assets/img/common/exit.png"
              alt=""
            />
            <span style="color: #ffffff">退出</span>
          </template>
        </el-button>
      </div>
    </div>
    <ul class="menus-box">
      <li
        :class="{ item: isActive, pre: !isActive }"
        @click="to(item)"
        v-for="(item, i) in allRouters[0].children"
        :key="i"
      >
        <img v-if="!item?.hidden || item.path == 'SJDP'" :src="bgImg(i)" alt="" />
        <div v-if="!item?.hidden || item.path == 'SJDP'" class="menus-text">{{ item.meta.title }}</div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useRouterStore } from '@/pinia/modules/router'
import { SwitchButton } from '@element-plus/icons-vue'
import { useUserStore } from '@/pinia/modules/user'
import { onBeforeMount, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { login_out } from '@/api/api'

const isShow = ref(false)
const isActive = ref(false)
const loginOutLoading = ref(false)
const routerStore = useRouterStore()
const userStore = useUserStore()
const router = useRouter()
const allRouters = routerStore.asyncRouters.allRoutes
console.log(allRouters[0].children)
const bgImg = i => {
  switch (i) {
    case 0:
      return new URL(`../../assets/img/home/home-1.png`, import.meta.url).href
    case 1:
      return new URL(`../../assets/img/home/home-2.png`, import.meta.url).href
    case 2:
      return new URL(`../../assets/img/home/home-3.png`, import.meta.url).href
    case 3:
      return new URL(`../../assets/img/home/home-4.png`, import.meta.url).href
    case 4:
      return new URL(`../../assets/img/home/home-5.png`, import.meta.url).href
    case 5:
      return new URL(`../../assets/img/home/home-6.png`, import.meta.url).href
  }
}

const toLoginOut = () => {
  ElMessageBox.confirm('确认退出？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      loginOutLoading.value = true
      let res = await login_out()
      if (res.succeed) {
        userStore.LoginOut()
        if (res.data) {
          window.location.href = res.data
        } else {
          ElMessage({
            type: 'success',
            message: '退出成功！'
          })
        }
      }
      loginOutLoading.value = false
    })
    .catch(() => {})
}

const getDefaultMenu = routes => {
  if (routes?.length > 0) {
    if (
      !routes[0].children ||
      routes[0].children.length == 0 ||
      routes[0].level == 4
    ) {
      console.log(routes)
      // 全屏路由需要打开新页面
      if (routes[0].isFullScreen == '1') {
        let url = router.resolve({
          name: routes[0].name
        })
        window.open(url.href, '_blank')
      } else {
        router.replace({
          name: routes[0].name
        })
      }
    } else {
      // 递归找到默认菜单
      getDefaultMenu(routes[0].children)
    }
  }
}

const to = val => {
  getDefaultMenu([val])
}
onMounted(() => {
  setTimeout(() => {
    isActive.value = true
  }, 0)
  setTimeout(() => {
    isShow.value = true
  }, 500)
})
</script>
<style lang="scss" scoped>
$title-big-size: 20px;
$title-middle-size: 18px;
$title-small-size: 16px;
$title-mini-size: 14px;

.container-home {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: #0630a4;
  background: url('../../assets/img/home/home_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .menus-box {
    width: 100%;
    height: 100%;

    li.pre {
      position: relative;
      cursor: pointer;
      color: #fff;
      transition-duration: 1500ms;

      // transition-timing-function: ease-in-out;
      &:nth-child(1) {
        width: 14.27%;
        position: absolute;
        left: -30%;
        top: 0.02%;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 48%;
          transform: translateX(-50%);
          top: calc(50% - 10px);
        }
      }

      &:nth-child(2) {
        width: 18.23%;
        position: absolute;
        left: -20%;
        top: 10.1%;
        transition-delay: 100ms;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: calc(50% + 10px);
        }
      }

      &:nth-child(3) {
        width: 14.27%;
        position: absolute;
        left: -10%;
        top: 91.33%;
        transition-delay: 200ms;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 50%;
        }
      }

      &:nth-child(4) {
        width: 16.15%;
        position: absolute;
        right: -20%;
        top: 1.39%;
        transition-delay: 200ms;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 50%;
        }
      }

      &:nth-child(5) {
        width: 18.18%;
        position: absolute;
        right: -20%;
        top: 80.82%;
        transition-delay: 100ms;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: calc(50% + 10px);
        }
      }

      &:nth-child(6) {
        width: 13.85%;
        position: absolute;
        right: -30%;
        top: 36.84%;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: calc(50% - 5px);
        }
      }
    }

    li.item {
      position: relative;
      cursor: pointer;
      color: #fff;
      transition-duration: 1500ms;

      // transition-timing-function: ease-in-out;
      &:nth-child(1) {
        width: 14.27%;
        position: absolute;
        left: 6.25%;
        top: 36.02%;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 48%;
          transform: translateX(-50%);
          top: calc(50% - 10px);
        }
      }

      &:nth-child(2) {
        width: 18.23%;
        position: absolute;
        left: 21.25%;
        top: 40.1%;
        transition-delay: 100ms;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: calc(50% + 10px);
        }
      }

      &:nth-child(3) {
        width: 14.27%;
        position: absolute;
        left: 38.59%;
        top: 61.33%;
        transition-delay: 200ms;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 50%;
        }
      }

      &:nth-child(4) {
        width: 16.15%;
        position: absolute;
        right: 41.82%;
        top: 29.39%;
        transition-delay: 200ms;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 50%;
        }
      }

      &:nth-child(5) {
        width: 18.18%;
        position: absolute;
        right: 22.81%;
        top: 40.82%;
        transition-delay: 100ms;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: calc(50% + 10px);
        }
      }

      &:nth-child(6) {
        width: 13.85%;
        position: absolute;
        right: 7.7%;
        top: 36.84%;

        img {
          width: 100%;
        }

        .menus-text {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: calc(50% - 5px);
        }
      }
    }
  }

  .isShow {
    opacity: 1 !important;
  }

  .title-box-pre {
    display: flex;
    align-items: center;
    position: absolute;
    left: 5%;
    top: 15%;
    transition-duration: 1500ms;
    transition-timing-function: ease-in-out;
    opacity: 0;
  }

  .title-box {
    display: flex;
    align-items: center;
    position: absolute;
    left: 5%;
    top: 10%;
    transition-duration: 1500ms;
    transition-timing-function: ease-in-out;
    opacity: 0;

    .logo {
      width: 38px;
      font-size: 0;

      img {
        width: 100%;
      }
    }

    .text {
      font-size: 30px;
      color: #fff;
      font-weight: bold;
      margin-left: 10px;
    }
  }

  .right-box {
    position: absolute;
    right: 5%;
    top: 10%;
    display: flex;
    align-items: center;

    .user-box {
      color: #ffffff;
      font-size: 18px;
    }

    .exit-box {
      margin-left: 10px;
    }
  }
}

@media screen and (min-width: 1024px) and (max-width: 1100px) {
  li {
    font-size: $title-mini-size;
  }
}

@media screen and (min-width: 1100px) {
  li {
    font-size: $title-mini-size;
  }
}

@media screen and (min-width: 1280px) {
  li {
    font-size: $title-mini-size;
  }
}

@media screen and (min-width: 1366px) {
  li {
    font-size: $title-small-size;
  }
}

@media screen and (min-width: 1440px) {
  li {
    font-size: $title-small-size;
  }
}

@media screen and (min-width: 1680px) {
  li {
    font-size: $title-middle-size;
  }
}

@media screen and (min-width: 1920px) {
  li {
    font-size: $title-big-size;
  }
}
</style>
